<template>
  <div class="min-h-screen p-6" style="background-color: #FAF9F5;">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <button
            @click="goBack"
            class="mr-4 p-2 text-gray-600 hover:text-gray-900 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <div>
            <h1 class="text-2xl font-bold text-gray-900">报到流程</h1>
            <p class="mt-1 text-sm text-gray-600">新生报到办理流程指南</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button
            @click="refreshData"
            class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <ArrowPathIcon class="w-4 h-4 mr-2" />
            刷新
          </button>
        </div>
      </div>
    </div>

    <!-- 时间导航 -->
    <div class="rounded-[0.6rem] border border-gray-200 mb-6 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-medium text-gray-900">时间导航</h2>
        <div class="flex items-center gap-2">
          <button
            @click="goToPreviousWeek"
            class="p-2 text-gray-400 hover:text-gray-600 transition-colors"
          >
            <ChevronLeftIcon class="w-5 h-5" />
          </button>
          <span class="text-sm font-medium text-gray-900 px-3">
            {{ formatWeekRange(currentWeek) }}
          </span>
          <button
            @click="goToNextWeek"
            class="p-2 text-gray-400 hover:text-gray-600 transition-colors"
          >
            <ChevronRightIcon class="w-5 h-5" />
          </button>
        </div>
      </div>
      <div class="grid grid-cols-7 gap-2">
        <div
          v-for="day in weekDays"
          :key="day.date"
          class="p-3 text-center rounded-[0.6rem] cursor-pointer transition-all duration-200 active:scale-[0.985] border border-gray-200"
          :style="isToday(day.date) ? 'background-color: #DBEAFE; color: #1E40AF; font-weight: 500; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);' : selectedDate === day.date ? 'background-color: #3B82F6; color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);' : 'background-color: #F5F5F0; color: #374151; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);'"
          @click="selectedDate = day.date"
        >
          <div class="text-xs text-gray-500 mb-1">{{ day.dayName }}</div>
          <div class="text-lg font-medium">{{ day.day }}</div>
          <div v-if="getEventsForDate(day.date).length > 0" class="flex justify-center mt-1">
            <div class="w-2 h-2 bg-red-500 rounded-full"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 报到流程 -->
      <div class="lg:col-span-2">
        <div class="rounded-[0.6rem] border border-gray-200 p-6 mb-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h2 class="text-lg font-medium text-gray-900 mb-6">报到流程</h2>
          <div class="space-y-4">
            <div
              v-for="(step, index) in registrationSteps"
              :key="step.id"
              class="flex items-start gap-4"
            >
              <div class="flex-shrink-0">
                <div :class="[
                  'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium',
                  step.completed ? 'bg-green-100 text-green-800' :
                  step.current ? 'bg-blue-100 text-blue-800' :
                  'bg-gray-100 text-gray-500'
                ]">
                  <CheckIcon v-if="step.completed" class="w-4 h-4" />
                  <span v-else>{{ index + 1 }}</span>
                </div>
              </div>
              <div class="flex-1">
                <h3 :class="[
                  'text-sm font-medium mb-1',
                  step.completed ? 'text-green-900' :
                  step.current ? 'text-blue-900' :
                  'text-gray-900'
                ]">{{ step.title }}</h3>
                <p class="text-sm text-gray-600 mb-2">{{ step.description }}</p>
                <div class="flex items-center gap-4 text-xs text-gray-500">
                  <div class="flex items-center">
                    <ClockIcon class="w-3 h-3 mr-1" />
                    {{ step.estimatedTime }}
                  </div>
                  <div class="flex items-center">
                    <MapPinIcon class="w-3 h-3 mr-1" />
                    {{ step.location }}
                  </div>
                </div>
                <div v-if="step.requirements.length > 0" class="mt-2">
                  <p class="text-xs text-gray-500 mb-1">所需材料：</p>
                  <ul class="text-xs text-gray-600 space-y-1">
                    <li v-for="req in step.requirements" :key="req" class="flex items-center">
                      <div class="w-1 h-1 bg-gray-400 rounded-full mr-2"></div>
                      {{ req }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 当日安排 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h2 class="text-lg font-medium text-gray-900 mb-6">
            {{ formatDate(selectedDate) }} 的安排
          </h2>
          <div v-if="selectedDateEvents.length > 0" class="space-y-4">
            <div
              v-for="event in selectedDateEvents"
              :key="event.id"
              class="border border-gray-200 rounded-[0.6rem] p-4"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center gap-2 mb-2">
                    <span :class="[
                      'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
                      getEventTypeClass(event.type)
                    ]">
                      {{ getEventTypeText(event.type) }}
                    </span>
                    <span v-if="event.isRequired" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                      必须参加
                    </span>
                  </div>
                  <h3 class="text-sm font-medium text-gray-900 mb-1">{{ event.title }}</h3>
                  <p class="text-sm text-gray-600 mb-2">{{ event.description }}</p>
                  <div class="flex items-center gap-4 text-xs text-gray-500">
                    <div class="flex items-center">
                      <ClockIcon class="w-3 h-3 mr-1" />
                      {{ event.startTime }} - {{ event.endTime }}
                    </div>
                    <div class="flex items-center">
                      <MapPinIcon class="w-3 h-3 mr-1" />
                      {{ event.location }}
                    </div>
                  </div>
                </div>
                <button
                  @click="toggleEventReminder(event)"
                  :class="[
                    'ml-4 p-2 rounded-lg transition-colors',
                    event.hasReminder ? 'text-blue-600 bg-blue-50 hover:bg-blue-100' :
                    'text-gray-400 hover:text-gray-600 hover:bg-gray-50'
                  ]"
                >
                  <BellIcon class="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
          <div v-else class="text-center py-8">
            <CalendarIcon class="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无安排</h3>
            <p class="text-gray-500">当天没有安排的活动</p>
          </div>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="space-y-6">
        <!-- 重要提醒 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h3 class="text-lg font-medium text-gray-900 mb-4">重要提醒</h3>
          <div class="space-y-3">
            <div
              v-for="reminder in importantReminders"
              :key="reminder.id"
              :class="[
                'p-3 rounded-lg border-l-4',
                reminder.type === 'urgent' ? 'bg-red-50 border-red-400' :
                reminder.type === 'warning' ? 'bg-yellow-50 border-yellow-400' :
                'bg-blue-50 border-blue-400'
              ]"
            >
              <div class="flex items-start">
                <ExclamationTriangleIcon v-if="reminder.type === 'urgent'" class="w-4 h-4 text-red-500 mt-0.5 mr-2" />
                <ExclamationCircleIcon v-else-if="reminder.type === 'warning'" class="w-4 h-4 text-yellow-500 mt-0.5 mr-2" />
                <InformationCircleIcon v-else class="w-4 h-4 text-blue-500 mt-0.5 mr-2" />
                <div class="flex-1">
                  <p class="text-sm font-medium text-gray-900">{{ reminder.title }}</p>
                  <p class="text-xs text-gray-600 mt-1">{{ reminder.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h3 class="text-lg font-medium text-gray-900 mb-4">紧急联系方式</h3>
          <div class="space-y-3">
            <div
              v-for="contact in emergencyContacts"
              :key="contact.id"
              class="flex items-center justify-between p-3 border border-gray-200 rounded-[0.6rem]"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <div>
                <p class="text-sm font-medium text-gray-900">{{ contact.name }}</p>
                <p class="text-xs text-gray-500">{{ contact.department }}</p>
              </div>
              <a
                :href="`tel:${contact.phone}`"
                class="text-blue-600 hover:text-blue-900 transition-colors"
              >
                <PhoneIcon class="w-4 h-4" />
              </a>
            </div>
          </div>
        </div>

        <!-- 进度统计 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h3 class="text-lg font-medium text-gray-900 mb-4">报到进度</h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between text-sm mb-2">
                <span class="text-gray-600">整体进度</span>
                <span class="font-medium text-gray-900">{{ overallProgress }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div
                  class="bg-blue-600 h-2 rounded-full transition-all duration-300"
                  :style="{ width: overallProgress + '%' }"
                ></div>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4 text-center">
              <div class="p-3 bg-green-50 rounded-lg">
                <div class="text-lg font-bold text-green-600">{{ completedSteps }}</div>
                <div class="text-xs text-green-600">已完成</div>
              </div>
              <div class="p-3 bg-blue-50 rounded-lg">
                <div class="text-lg font-bold text-blue-600">{{ remainingSteps }}</div>
                <div class="text-xs text-blue-600">待完成</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/app'
import {
  ArrowPathIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  CheckIcon,
  ClockIcon,
  MapPinIcon,
  CalendarIcon,
  BellIcon,
  ExclamationTriangleIcon,
  ExclamationCircleIcon,
  InformationCircleIcon,
  PhoneIcon
} from '@heroicons/vue/24/outline'

// 使用stores和router
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const currentWeek = ref(new Date())
const selectedDate = ref(new Date().toISOString().split('T')[0])
const events = ref([])
const registrationSteps = ref([])
const importantReminders = ref([])
const emergencyContacts = ref([])

// 计算属性
const weekDays = computed(() => {
  const days = []
  const startOfWeek = new Date(currentWeek.value)
  startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay())
  
  for (let i = 0; i < 7; i++) {
    const date = new Date(startOfWeek)
    date.setDate(startOfWeek.getDate() + i)
    days.push({
      date: date.toISOString().split('T')[0],
      day: date.getDate(),
      dayName: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
    })
  }
  
  return days
})

const selectedDateEvents = computed(() => {
  return events.value.filter(event => event.date === selectedDate.value)
})

const completedSteps = computed(() => {
  return registrationSteps.value.filter(step => step.completed).length
})

const remainingSteps = computed(() => {
  return registrationSteps.value.length - completedSteps.value
})

const overallProgress = computed(() => {
  if (registrationSteps.value.length === 0) return 0
  return Math.round((completedSteps.value / registrationSteps.value.length) * 100)
})

// 方法
const loadScheduleData = async () => {
  // 模拟加载日程数据
  registrationSteps.value = [
    {
      id: 1,
      title: '在线信息确认',
      description: '登录系统确认个人基本信息，上传证件照片',
      estimatedTime: '15分钟',
      location: '线上操作',
      completed: true,
      current: false,
      requirements: ['身份证', '证件照片', '录取通知书']
    },
    {
      id: 2,
      title: '缴费确认',
      description: '完成学费、住宿费等相关费用的缴纳',
      estimatedTime: '10分钟',
      location: '线上支付',
      completed: true,
      current: false,
      requirements: ['银行卡', '缴费通知单']
    },
    {
      id: 3,
      title: '宿舍申请',
      description: '选择宿舍楼栋和房间，确认住宿安排',
      estimatedTime: '20分钟',
      location: '线上操作',
      completed: false,
      current: true,
      requirements: ['住宿申请表']
    },
    {
      id: 4,
      title: '现场报到',
      description: '到指定地点进行现场报到确认',
      estimatedTime: '30分钟',
      location: '学生服务中心',
      completed: false,
      current: false,
      requirements: ['身份证原件', '录取通知书', '户口迁移证']
    },
    {
      id: 5,
      title: '领取物品',
      description: '领取学生卡、宿舍钥匙等物品',
      estimatedTime: '15分钟',
      location: '物品发放处',
      completed: false,
      current: false,
      requirements: ['学生证', '报到确认单']
    }
  ]

  events.value = [
    {
      id: 1,
      title: '新生报到',
      description: '新生现场报到，办理入学手续',
      date: '2024-02-24',
      startTime: '08:00',
      endTime: '17:00',
      location: '学生服务中心',
      type: 'registration',
      isRequired: true,
      hasReminder: true
    },
    {
      id: 2,
      title: '宿舍入住',
      description: '办理宿舍入住手续，领取宿舍钥匙',
      date: '2024-02-24',
      startTime: '14:00',
      endTime: '18:00',
      location: '各宿舍楼',
      type: 'accommodation',
      isRequired: true,
      hasReminder: false
    },
    {
      id: 3,
      title: '新生入学教育',
      description: '参加新生入学教育讲座',
      date: '2024-02-25',
      startTime: '09:00',
      endTime: '11:00',
      location: '大礼堂',
      type: 'education',
      isRequired: true,
      hasReminder: true
    },
    {
      id: 4,
      title: '体检安排',
      description: '新生入学体检',
      date: '2024-02-25',
      startTime: '14:00',
      endTime: '17:00',
      location: '校医院',
      type: 'medical',
      isRequired: true,
      hasReminder: false
    }
  ]

  importantReminders.value = [
    {
      id: 1,
      title: '报到时间',
      content: '请务必在2月24日-25日期间完成报到',
      type: 'urgent'
    },
    {
      id: 2,
      title: '携带材料',
      content: '请确保携带所有必需的证件和材料',
      type: 'warning'
    },
    {
      id: 3,
      title: '交通安排',
      content: '学校在火车站和机场设有接站点',
      type: 'info'
    }
  ]

  emergencyContacts.value = [
    {
      id: 1,
      name: '学生处',
      department: '报到咨询',
      phone: '010-12345678'
    },
    {
      id: 2,
      name: '宿管中心',
      department: '住宿问题',
      phone: '010-12345679'
    },
    {
      id: 3,
      name: '财务处',
      department: '缴费问题',
      phone: '010-12345680'
    }
  ]
}

const goToPreviousWeek = () => {
  const newWeek = new Date(currentWeek.value)
  newWeek.setDate(newWeek.getDate() - 7)
  currentWeek.value = newWeek
}

const goToNextWeek = () => {
  const newWeek = new Date(currentWeek.value)
  newWeek.setDate(newWeek.getDate() + 7)
  currentWeek.value = newWeek
}

const isToday = (date) => {
  const today = new Date().toISOString().split('T')[0]
  return date === today
}

const getEventsForDate = (date) => {
  return events.value.filter(event => event.date === date)
}

const toggleEventReminder = (event) => {
  event.hasReminder = !event.hasReminder
  appStore.showNotification(
    event.hasReminder ? '已设置提醒' : '已取消提醒',
    'success'
  )
}

const getEventTypeClass = (type) => {
  const typeClasses = {
    'registration': 'bg-blue-100 text-blue-800',
    'accommodation': 'bg-green-100 text-green-800',
    'education': 'bg-purple-100 text-purple-800',
    'medical': 'bg-orange-100 text-orange-800'
  }
  return typeClasses[type] || 'bg-gray-100 text-gray-800'
}

const getEventTypeText = (type) => {
  const typeTexts = {
    'registration': '报到',
    'accommodation': '住宿',
    'education': '教育',
    'medical': '体检'
  }
  return typeTexts[type] || type
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

const formatWeekRange = (date) => {
  const startOfWeek = new Date(date)
  startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay())
  const endOfWeek = new Date(startOfWeek)
  endOfWeek.setDate(startOfWeek.getDate() + 6)
  
  return `${startOfWeek.getMonth() + 1}月${startOfWeek.getDate()}日 - ${endOfWeek.getMonth() + 1}月${endOfWeek.getDate()}日`
}

const refreshData = async () => {
  try {
    await loadScheduleData()
    appStore.showNotification('数据刷新成功', 'success')
  } catch (error) {
    appStore.showNotification('刷新失败，请重试', 'error')
  }
}

// 返回首页
const goBack = () => {
  router.push('/student/home')
}

// 生命周期
onMounted(() => {
  loadScheduleData()
})
</script>